<template>
  <div>
    <!-- 首页导航 -->
    <Navs></Navs>
    <!-- content -->
    <section class="content">
      <!-- swiper -->
      <div class="content_cont">
        <!-- 全局搜索 -->
        <search></search>
        <div class="header">
          <div class="left">资讯列表</div>
          <div class="right">
            <img :src="imgurl.pos" alt />
            <span>当前位置：</span>
            <span @click="$router.push('/')">首页</span>
            >
            <span @click="$router.go(0)">资讯列表</span>
          </div>
        </div>
        <!-- 主内容 -->
        <div class="mainCont">
          <div class="mainCont_left">
            <!--  资讯列表-->
            <div v-for="(item,index) in dataLists" :key="index">
              <div>
                <div>{{item.title}}</div>
                <div>{{item.content}}</div>
                <div @click="watchDetails(item.id)">查看详情</div>
              </div>
              <img :src="item.url" alt />
            </div>
            <!-- 分页 :hide-on-single-page="value"显示隐藏分页-->
            <el-pagination
              background
              layout="prev, pager, next"
              :total="pageConfiguration.countSize"
              class="pagination"
              :page-size="pageConfiguration.oneSize"
              :hide-on-single-page="true"
              @prev-click="prevClick"
              @next-click="nextClick"
              @current-change="currentChange"
            ></el-pagination>
          </div>
          <div class="mainCont_right">
            <div class="right2">
              <div class="title">24小时热文</div>
              <div class="content">
                <div
                  v-for="(item,index) in twentyFourtimeData"
                  :key="index"
                  @click="$router.push({path:'/listDetails',query:{id:item.id}})"
                >
                  <img :src="item.url" alt />
                  <div>
                    <div class="top" :title="item.title">{{item.title}}</div>
                    <div class="bottom" :title="item.content">{{item.content}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>

<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
  name: 'index',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search
  },
  data () {
    return {
      imgurl: {
        pos: require('../../../static/company/posweizhi.png'),
        list1: require('../../../static/dataList/list1.png')
      },
      // 咨询列表数据
      dataLists: [
        // {
        //   title: '五大行入局区块链，区块链革命正在到来',
        //   content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
        //   url: require('../../../static/dataList/list1.png')
        // },
        // {
        //   title: '五大行入局区块链，区块链革命正在到来',
        //   content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
        //   url: require('../../../static/dataList/list1.png')
        // },
        // {
        //   title: '五大行入局区块链，区块链革命正在到来',
        //   content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
        //   url: require('../../../static/dataList/list1.png')
        // },
        // {
        //   title: '五大行入局区块链，区块链革命正在到来',
        //   content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
        //   url: require('../../../static/dataList/list1.png')
        // },
        // {
        //   title: '五大行入局区块链，区块链革命正在到来',
        //   content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
        //   url: require('../../../static/dataList/list1.png')
        // }
      ],
      // 分页配置
      pageConfiguration: {
        // 每页显示条数
        oneSize: 5,
        // 数据总条数
        countSize: 36,
        // 总页数
        countPage: 1,
        // 当前页
        newPage: 1
      },
      // 24小时热闻数据
      twentyFourtimeData: [
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // },
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // },
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // },
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // },
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // }
      ]
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 查看详情
    watchDetails (ids) {
      this.$router.push({
        path: '/listDetails',
        query: {
          id: ids
        }
      })
    },
    // 24小时热闻
    hotArticle () {
      this.$axios({
        method: 'GET',
        url: 'index/index/hot-article',
        params: {
        }
      }).then(res => {
        // console.log(res, '24小时热闻')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            let objuu = {
              url: item.thumb,
              title: item.title,
              content: item.desc,
              id: item.id
            }
            arrts.push(objuu)
          })
          this.twentyFourtimeData = arrts
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 数据咨询、资讯列表
    article (page) {
      this.$axios({
        method: 'GET',
        url: 'index/index/article',
        params: {
          page: page,
          limit: 5
        }
      }).then(res => {
        // console.log(res, '数据咨询、资讯列表')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            let objuu = {
              title: item.title,
              content: item.desc,
              time: item.update_time,
              url: item.thumb,
              id: item.id
            }
            arrts.push(objuu)
          })
          this.dataLists = arrts
          this.pageConfiguration.countSize = parseInt(res.data.data.total)
          this.pageConfiguration.countPage = parseInt(res.data.data.total) / 5
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 点击上一页
    prevClick () {
      this.pageConfiguration.newPage--
      this.article(this.pageConfiguration.newPage)
    },
    // 点击下一页
    nextClick () {
      this.pageConfiguration.newPage++
      this.article(this.pageConfiguration.newPage)
    },
    currentChange (ev) {
      this.pageConfiguration.newPage = ev
      this.article(ev)
    }
  },
  computed: {
    // 计算字符串
    computedStr () {
      return (str) => {
        let Strs = ''
        str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
        return Strs
      }
    }
  },
  mounted () {
    // 资讯列表
    this.article(1)
    // 24小时热闻
    this.hotArticle()
  }
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .content_cont {
    width: 84.25rem;
    & > .header {
      width: 84.25rem;
      height: 4.25rem;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      & > .left {
        // margin-left: 1.5rem;
        font-size: 1.5rem;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0.125rem;
        color: #000000;
      }
      & > .right {
        // margin-right: 1.5rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #8fa3ae;
        & > img {
          width: 1rem;
          height: 1.25rem;
          margin-right: 0.45rem;
        }
        & > span:nth-child(n + 3):hover {
          cursor: pointer;
          color: #52b6e3;
        }
      }
    }
    // border: 1px solid red;
    & > .swipersty {
      width: 100%;
      height: 33.25rem;
    }
    & > .mainCont {
      // margin-top: 3.125rem;
      margin-bottom: 3.125rem;
      width: 100%;
      // border: 0.0625rem solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      & > .mainCont_left {
        // border: 0.0625rem solid red;
        width: 55.625rem;
        & > div:nth-last-child(n + 2) {
          margin-bottom: 1.25rem;
          width: 100%;
          height: 14.75rem;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
          background-color: #fff;
          & > div {
            width: 33.75rem;
            height: 11.75rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            & > div:nth-child(1) {
              font-size: 1.25rem;
              font-weight: bold;
              font-stretch: normal;
              // line-height: 30px;
              letter-spacing: 0rem;
              color: #333333;
            }
            & > div:nth-child(2) {
              font-size: 1.125rem;
              font-weight: normal;
              font-stretch: normal;
              line-height: 2rem;
              letter-spacing: 0rem;
              color: #666666;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 5; /* 省略号在第几行 */
              -webkit-box-orient: vertical;
            }
            & > div:nth-child(3) {
              font-size: 1.125rem;
              font-weight: normal;
              font-stretch: normal;
              line-height: 32px;
              letter-spacing: 0rem;
              color: #52b6e3;
              border-bottom: 0.0625rem solid #52b6e3;
            }
            & > div:nth-child(3):hover {
              cursor: pointer;
            }
          }
          & > img {
            width: 12rem;
            height: 12rem;
            border-radius: 0.3125rem;
          }
        }
        & > div:last-child {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
        }
      }
      & > .mainCont_right {
        width: 27.375rem;
        & > .right2 {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          background-color: #ffffff;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
          & > .title {
            width: 24.875rem;
            height: 3.75rem;
            font-size: 1.5rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0.3125rem;
            color: #000000;
            border-bottom: 0.0625rem solid #dbdbdb;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
          }
          & > .content {
            width: 24.875rem;
            & > div {
              width: 100%;
              height: 7.625rem;
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              align-items: center;
              & > img {
                width: 7.25rem;
                height: 5.125rem;
              }
              & > div {
                width: 16rem;
                height: 5.125rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                & > .top {
                  font-size: 1.125rem;
                  font-weight: normal;
                  font-stretch: normal;
                  // line-height: 23px;
                  letter-spacing: 0rem;
                  color: #333333;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                  overflow: hidden;
                }
                & > .bottom {
                  width: 16rem;
                  font-size: 1rem;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 1.5rem;
                  letter-spacing: 0rem;
                  color: #666666;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2; /* 省略号在第几行 */
                  -webkit-box-orient: vertical;
                }
              }
            }
            & > div:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
